<template>
  <!--  -->
  <div id="userLayout">
    <a-layout style="min-height: 100vh">
      <a-layout-header class="header">
        <a-space>
          <img src="@/assets/oj_logo2.png" class="logo" alt="logo" />
          <div>OJ判题系统</div>
        </a-space>
      </a-layout-header>
      <a-layout-content class="content">
        <router-view />
      </a-layout-content>
      <!--      <a-layout-footer class="footer">
              <a href="https://yupi.icu" target="_blank">OJ判题系统by Adcage</a>
            </a-layout-footer>-->
    </a-layout>
  </div>
</template>

<style scoped>
#userLayout {
  text-align: center;
  /*
    background: url("@/assets/background3.png") no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: 100%;*/
}

#userLayout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("@/assets/background3.png") no-repeat center center fixed;
  background-size: cover;
  //opacity: 0.6; /* 设置透明度，0 ~ 1 */
  z-index: -1; /* 确保在内容之下 */
}

#userLayout .header {
  margin-top: 16px;
}

#userLayout .logo {
  width: 48px;
  height: 48px;
}

#userLayout .content {
  margin-bottom: 16px;
  padding: 20px;
}

#userLayout .footer {
  background: #efefef;
  padding: 16px;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
</style>
<script setup lang="ts"></script>
